<template>
  <div class="two">
    <div class="top">
          <van-nav-bar
        title="标题"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      
        />
    </div>
    <div class="choosed" @click="add">
          <!-- <p v-show="isOn" >
           <img :src="require('../public/images/加号.png')" alt=""/> 
           添加
           </p> -->
           <van-grid >
              <van-grid-item v-for="(item, id) in localList" :key="id" 
              :icon=item.img :text=item.name 
              badge="X" 
              @click="reduce(id)" />
             
            </van-grid>
    </div>
    <div class="bottom">
           <van-grid :column-num="5">
              <van-grid-item v-for="(item, id) in acceptList" :key="id" 
              :icon=item.img :text=item.name 
              @click="jia(item.id,item)"
              badge="+" />
             
            </van-grid>
    </div>
  </div>
</template>

<script>

import  axios  from "../request/http";
export default {
data() {
  return {
    acceptList: [],
    localList: [],
    isOn:true,
  }
  },
 created(){
    axios.get('/getList')
     .then(data => {
       console.log(data.data);
       this.acceptList= data.data
     })
     
  },
  methods: {
     onClickLeft() {
     this.$router.go(-1)
    },
    add() {
      // this.isOn = false
    },
    jia(id, item) {
      // console.log(index);
      // console.log(id);
      if (item.id = id) {        
        // console.log(item.name);
        var arrStr ={id:id, name:item.name, img:item.img}
        this.localList.push(arrStr)
        console.log(this.localList );

      }     
    },
    reduce(id) {
      // console.log(item.id);
      // console.log(item);
      // console.log(index);

      this.localList = this.localList.filter((v)=>v.id = !id)
    }
  },
}
</script>

<style lang="scss">
.choosed{
  width: 750px;
  // min-height: 300px;
  // background: grey;
  p{
    width: 100px;
    height: 100px;
    img{
      width: 40px;
      height: 40px;
    }
  }
}


</style>